<template>
  <div class="resource-occupancy">
    <Page
      title="占用与结算管理"
      subtitle="记录资源被占用的业务/订单信息，自动计算使用成本或结算金额"
    >
      <!-- 占用概览统计 -->
      <div class="occupancy-overview">
        <Row :gutter="16">
          <Col :span="6">
            <StatisticCard
              title="当前占用"
              :value="overview.currentOccupancy"
              :precision="0"
              suffix="个"
              :value-style="{ color: '#3f8600' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:clock-outline" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="今日收入"
              :value="overview.todayRevenue"
              :precision="2"
              prefix="¥"
              :value-style="{ color: '#1890ff' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:currency-usd" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="待结算"
              :value="overview.pendingSettlement"
              :precision="0"
              suffix="笔"
              :value-style="{ color: '#faad14' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:receipt" />
              </template>
            </StatisticCard>
          </Col>
          <Col :span="6">
            <StatisticCard
              title="利用率"
              :value="overview.utilizationRate"
              :precision="1"
              suffix="%"
              :value-style="{ color: '#722ed1' }"
            >
              <template #icon>
                <IconifyIcon icon="mdi:chart-line" />
              </template>
            </StatisticCard>
          </Col>
        </Row>
      </div>

      <!-- 占用记录管理 -->
      <div class="occupancy-records">
        <Card title="占用记录管理" :bordered="false">
          <Tabs v-model:active-key="activeOccupancyTab">
            <TabPane key="current" tab="当前占用">
              <CurrentOccupancy />
            </TabPane>
            <TabPane key="history" tab="历史记录">
              <OccupancyHistory />
            </TabPane>
            <TabPane key="conflicts" tab="占用冲突">
              <OccupancyConflicts />
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <!-- 结算管理 -->
      <div class="settlement-management">
        <Card title="结算管理" :bordered="false">
          <Tabs v-model:active-key="activeSettlementTab">
            <TabPane key="pending" tab="待结算">
              <PendingSettlement />
            </TabPane>
            <TabPane key="completed" tab="已结算">
              <CompletedSettlement />
            </TabPane>
            <TabPane key="reports" tab="结算报表">
              <SettlementReports />
            </TabPane>
          </Tabs>
        </Card>
      </div>

      <!-- 成本分析 -->
      <div class="cost-analysis">
        <Card title="成本分析" :bordered="false">
          <CostAnalysis />
        </Card>
      </div>

      <!-- 财务对接 -->
      <div class="financial-integration">
        <Card title="财务对接" :bordered="false">
          <FinancialIntegration />
        </Card>
      </div>
    </Page>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue';
import { Row, Col, Card, Tabs, TabPane } from 'ant-design-vue';
import { Page } from '@vben/common-ui';
import { IconifyIcon } from '@vben/icons';
import StatisticCard from '#/components/hotel/StatisticsCard.vue';

// 子组件
import CurrentOccupancy from './components/CurrentOccupancy.vue';
import OccupancyHistory from './components/OccupancyHistory.vue';
import OccupancyConflicts from './components/OccupancyConflicts.vue';
import PendingSettlement from './components/PendingSettlement.vue';
import CompletedSettlement from './components/CompletedSettlement.vue';
import SettlementReports from './components/SettlementReports.vue';
import CostAnalysis from './components/CostAnalysis.vue';
import FinancialIntegration from './components/FinancialIntegration.vue';

// 占用概览数据
const overview = reactive({
  currentOccupancy: 0,
  todayRevenue: 0,
  pendingSettlement: 0,
  utilizationRate: 0,
});

// 当前激活的标签
const activeOccupancyTab = ref('current');
const activeSettlementTab = ref('pending');

// 加载占用概览数据
const loadOccupancyOverview = async () => {
  try {
    // TODO: 调用API获取占用概览数据
    overview.currentOccupancy = 89;TODOTODO
    overview.todayRevenue = 15680.5;
    overview.pendingSettlement = 23;
    overview.utilizationRate = 78.5;
  } catch (error) {
    console.error('加载占用概览失败:', error);
  }
};

onMounted(() => {
  loadOccupancyOverview();
});
</script>

<style scoped>
.resource-occupancy {
  padding: 20px;
}

.occupancy-overview {
  margin-bottom: 24px;
}

.occupancy-records {
  margin-bottom: 24px;
}

.settlement-management {
  margin-bottom: 24px;
}

.cost-analysis {
  margin-bottom: 24px;
}

.financial-integration {
  margin-bottom: 24px;
}
</style>
